@use "scss/colors";
@use "scss/variables";

.virtualLogs {
  flex-grow: 1;

  &__lineNumber {
    min-width: calc(calc(2 * variables.$spacing-md) + 3ch);
    text-align: right;
    color: colors.$grey-300;
    padding-inline: variables.$spacing-md;
    user-select: none;
  }

  &__lineInner {
    font-family: monospace;
    display: flex;
    align-items: center;

    > div {
      white-space: pre;
    }
  }

  &__lineLogContent {
    position: relative;
  }

  &__searchMatch {
    position: absolute;
    bottom: 0;
    height: 100%;
    background-color: colors.$yellow-200;
    mix-blend-mode: color;
    isolation: auto;
    pointer-events: none;
  }

  &__lineInner--highlighted {
    background-color: colors.$blue-40;

    .virtualLogs__lineNumber {
      font-weight: 700;
      color: colors.$blue;
    }
  }

  .virtualLogs__line {
    // the mix-blend-mode use for highlighting search matches will blend with the background color
    // but our configuration blends with an almost white or black background and has no effect,
    // position+z-index creates a new stacking context to avoid the background and instead
    // colors (instead of blending with) the now-transparent region
    position: relative;
    z-index: 1;

    // explicitly set height to avoid race condition between React rendering the inner content & Virtuoso measuring the height
    height: 1em;

    // make all rows the same width so highlighting spans the entire scrollable space
    display: table-row;

    /** The following classes are generated by the anser npm library. The colors of the highlighted parts are defined here. */
    /* stylelint-disable */
    :global(.ansi-blue-bg) {
      background-color: colors.$ansi-blue-bg;
    }

    :global(.ansi-cyan-bg) {
      background-color: colors.$ansi-cyan-bg;
    }

    :global(.ansi-yellow-bg) {
      background-color: colors.$ansi-yellow-bg;
    }

    :global(.ansi-cyan-fg) {
      color: colors.$ansi-cyan-fg;
    }

    :global(.ansi-green-fg) {
      color: colors.$ansi-green-fg;
    }

    :global(.ansi-yellow-fg) {
      color: colors.$ansi-yellow-fg;
    }

    :global(.ansi-red-fg) {
      color: colors.$ansi-red-fg;
    }
    /* stylelint-enable */
  }
}
